
import React, {Component} from 'react'
import './login.scss'
import { Input, Icon, Button, Modal } from 'antd';
import Loading  from '../loading/loading';

import  *  as  loginAction  from  './loginAction';

import  database from  '../../static/database.json'


// connect需要知道你这个组件需要获取哪些state，以及你需要dispatch哪些action
import {connect} from 'react-redux'


class LoginComponent extends Component{
    login(){
        //  显示loading
         this.setState({
           loadingStatus:true,
        })

          var params = {
              username:this.state.userName,
              password:this.state.passWord
          }

          if(params.username != "" &&  params.password != ""){
                  if(database.adminifo.username == params.username &&  database.adminifo.username == params.username ){
                        // 模拟请求比较慢
                        var _this = this;
                        var time = setTimeout(function(){
                             var  options = {
                                 key:"adminifo",
                                 value:params
                             }
                             _this.sessionstorageSet(options)
                             _this.props.router.push({pathname: '/home'});
                             _this.setState({ loadingStatus: false });
                        },2000)
                  }else{

                      var _this = this;
                      var time = setTimeout(function(){
                           // _this.props.router.push({pathname: '/home'});
                            alert("输入的账号密码有误")
                           _this.setState({ loadingStatus: false });
                      },2000)
                  }

          }else{
                 // alert('登录失败');
                 this.setState({ loadingStatus: false });
                 this.showModal()
          }

          // var api = "login";
          // this.props.Init(api, params).then(response=>{
             //  请求成功
             // if(response.msg==="成功"){
             //      // 模拟请求比较慢
             //      var _this = this;
             //      var time = setTimeout(function(){
             //           _this.props.router.push({pathname: '/home'});
             //           _this.setState({ loadingStatus: false });
             //      },2000)
             // }else{
             //     alert('登录失败');
             //     this.setState({ loadingStatus: false });
             // }
          // });
    }
    constructor(props) {
        super(props);
        this.state = {
          userName: '',
          passWord: '',
          loadingStatus:false,
           visible: false,
        };
    }

    sessionstorageSet = (options) => {
       if (window.sessionStorage) {
         if (typeof options.value === "object") {
           window.sessionStorage.setItem(options.key, JSON.stringify(options.value));
         } else {
           window.sessionStorage.setItem(options.key, options.value);
         }
       } else {
         return "浏览器不支持sessionStorage";
       }
     }

    emitEmpty = (e) => {
        var  Type = e.target.parentNode.previousSibling.type;
                // console.log(Type)
        switch(Type){
          case 'text':
            this.userNameInput.focus();
            this.setState({ userName: ''});
            break;
          case 'password':
            this.passWordInput.focus();
            this.setState({passWord:''});
            break;
          default:
            console.log('6666')
        }
      }
      onChangeUserName = (e) => {
        this.setState({ userName: e.target.value });
      }
      onChangePassWord = (e) => {
         // console.log(e)
        this.setState({ passWord: e.target.value });
      }
      // componentDidMount在render后调用 首次渲染后和当 state 发生改变再次渲染后触发该方法。
      componentDidMount(){
          // this.props.Init();
          // console.log(this.props.Init())
      }
      showModal = () => {
          this.setState({
            visible: true,
          });
      }
      hideModal = () => {
          this.setState({
            visible: false,
          });
      }
     render(){

        const  mapStateToProps_data =  this.props;
        // console.log(mapStateToProps_data)
        const  userName = this.state.userName;
        const  passWord = this.state.passWord;
        const  loadingStatus = this.state.loadingStatus;
        const  suffix_u = userName ? <Icon type="close-circle" onClick={this.emitEmpty} /> : null;
        const  suffix_p = passWord ? <Icon type="close-circle" onClick={this.emitEmpty} /> : null;


        return (
           <div className="bg">
              <div className="login-box">
                 <h1>管理后台（react）</h1>
                 <div  className="content">
                    <p>
                    <span>用户：</span>
                    <Input
                     placeholder="请输入账户名"
                     prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                     suffix={suffix_u}
                     value={userName}
                     type="text"
                     onChange={this.onChangeUserName}
                     ref={node => this.userNameInput = node}
                   />
                    </p>
                    <p>
                    <span>密码：</span>
                    <Input
                      placeholder="请输入密碼"
                      prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      value={passWord}
                      suffix={suffix_p}
                      type="password"
                      onChange={this.onChangePassWord}
                      ref={node => this.passWordInput = node}
                    />
                    </p>
                    <Button type="primary" block  onClick={this.login.bind(this)}>登录</Button>
                 </div>
                 <div className="copyright">2018 © cm by www.cm58xin.com</div>
              </div>
               {loadingStatus ? <Loading /> : null}


               <Modal
                  title="温馨提醒"
                  visible={this.state.visible}
                  onOk={this.hideModal}
                  onCancel={this.hideModal}
                  okText="确认"
                  cancelText="取消"
                  centered={true}
                  footer=""  //设置为空取消底部按钮
                >
                  <p>请输入账号和密码</p>
                </Modal>
           </div>
        )
     }

}


// LoginComponent是UI组件,即展示组件;
// Visiblelogin 是  通过 React-Redux 的 connect方法自动生成的容器组件。 （容器组件负责管理数据和逻辑）
//connect方法接受两个参数：mapStateToProps 和 mapDispatchToProps（loginAction）。它们定义了 UI 组件的业务逻辑。
//前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。
//connect方法可以省略mapStateToProps参数，那样的话，UI 组件就不会订阅Store，就是说 Store 的更新不会引起 UI 组件的更新。

// mapStateToProps是一个函数，它接受state作为参数，返回一个对象,这个对象有一个mapStateToProps_data属性，代表 UI 组件的同名参数，
//mapDispatchToProps（loginAction）定义了 UI 组件的参数怎样发出 Action。


const mapStateToProps = function(state){
      // console.log(state)
    return {
       mapStateToProps_data:state
    }
}


const Visiblelogin = connect(
  mapStateToProps,
  loginAction
)(LoginComponent);


export default  Visiblelogin;

